{% extends 'base.html' %}
{% load patrowl_tags %}
{% block content %}

<ul class="breadcrumb">
  <li><a href="{% url 'list_engines_view' %}">engines</a></li>
  <li class="active">policies</li>
</ul>

<div class="container">
  <table class="table table-hover"
      data-toggle="table"
      data-sort-name="value"
      data-sort-order="desc">
    <thead>
      <tr>
        <th data-field="cb"><input type="checkbox" onClick="toggle(this)" /></th>
        <th data-field="engine_name">Engine Name</th>
        <th data-field="name">Name (<span class="glyphicon glyphicon-file"></span>: policy file included)</th>
        <th data-field="updated_at">Last update</th>
        <th data-field="actions">Actions</th>
      </tr>
    </thead>
    <tbody>
    {% for policy in policies %}
    <tr>
      <td><input type="checkbox" class="radio" name="policy" value="{{ policy.id }}"/></td>
      <td>{{ policy.type }}</td>
      <td>{{ policy.name }}
        {% if policy.file.name %}<span class="glyphicon glyphicon-file"></span>{% endif %}
      </td>
      <td>{{ policy.updated_at|smartdate }}</td>
      <td>
        <button type="button" class="btn btn-default btn-xs btn-engine-info" data-toggle="modal" data-target="#modalInfo{{ policy.id }}">
          <span class="glyphicon glyphicon-info-sign"></span></button>
        <div id="modalInfo{{ policy.id }}" class="modal fade" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header bg-primary">
                <button type="button" class="close" style="color:white" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">{{ policy.name }}</h4>
              </div>
              <div class="modal-body">
                <p>{{ policy.description }}</p>
                <p>Engine: {{ policy.type }}</p>
                <p>Options: {{ policy.options }}</p>
                <p>Scopes: {{ policy.scopes.all|join:", " }}</p>
                <p>Status: {{ policy.status }}</p>
                <p>Is default?: {{ policy.default }}</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <button type="button" class="btn btn-default dropdown-toggle btn-xs btn-duplicate-policy" policy-id="{{ policy.id }}">
          <span class="glyphicon glyphicon-duplicate"></span></button>
        <button type="button" class="btn btn-default dropdown-toggle btn-xs" aria-haspopup="true" aria-expanded="false" onclick="location.href='/engines/policies/edit/{{ policy.id }}'">
          <span class="glyphicon glyphicon-edit"></span></button>
        <button type="button" class="btn btn-default btn-xs" aria-haspopup="true" aria-expanded="false" onclick="location.href='{% url 'export_policy_api' policy.id %}'">
          <span class="glyphicon glyphicon-share"></span></button>
        <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#modal-delete-policy"
           policy-id="{{ policy.id }}" policy-name="{{ policy.name }}">
           <span class="glyphicon glyphicon-remove"></span></button>
      </td>
    </tr>
  {% endfor %}
  </tbody>
  </table>
  <a href="{% url 'add_policy_view' %}">+ Add a new policy</a><br/>
  <a class="text-warning btn-export-selected" href="#">* Export selected policies</a> or <a href="{% url 'export_policies_api' %}?all=true" class="text-warning">* Export all policies</a><br/>
  <a href="{% url 'import_policies_view' %}" class="text-danger"># Import policies</a><br/>

  {% if messages %}
  <ul class="messages">
      {% for message in messages %}
      <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
      {% endfor %}
  </ul>
  {% endif %}
</div>

<!-- Delete Policy modal -->
<div class="modal fade" id="modal-delete-policy" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header bg-primary">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Delete Policy</h4>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <div id="delete-policy">
          <!-- Content -->
        </div>
        Confirm Deleting?
        <button type="button" class="btn btn-xs btn-warning btn-delete-policy" data-dismiss="modal" autofocus>Yes</button>
        <button type="button" class="btn btn-xs btn-primary" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>


<script>

  function toggle(source) {
    checkboxes = document.getElementsByName('policy');
    for(var i=0, n=checkboxes.length;i<n;i++) {
      checkboxes[i].checked = source.checked;
    }
  }

  // jQuery ready
  $(function() {

    // Export selected policies
    $("a.btn-export-selected").on('click', function(eventObject) {
      policies_to_export = [];
      $("input[name='policy']").each(function(cbx){
        if (this.checked) {
          policies_to_export.push(this.value)
        }
      });

      if (policies_to_export.length != 0){
        export_url="{% url 'export_policies_api' %}"
        var request = $.ajax({
          url: export_url,
          method: "POST",
          headers: {"X-CSRFToken": "{{ csrf_token }}"},
          data: JSON.stringify(policies_to_export),
          contentType: "application/json"
        });
        request.done(function(response){
          var blob=new Blob([JSON.stringify(response)], {type: "application/json"});
          var link=document.createElement('a');
          link.href=window.URL.createObjectURL(blob);
          link.download="selected_policies.json";
          link.click();
        });
      }
    }); // End - Export selected policies

    // Delete engine policy modal
    $("#modal-delete-policy").on('show.bs.modal', function (e) {
      policy_id = e.relatedTarget.getAttribute('policy-id');
      policy_name = e.relatedTarget.getAttribute('policy-name');
      $("div#delete-policy").attr('policy-id', policy_id);
      $("div#delete-policy").html("Policy: <b>"+policy_name+"</b><br/><br/>");
    });
    $("button.btn-delete-policy").on('click', function (e) {
      policy_id = $("div#delete-policy").attr('policy-id');
      delete_policy_url = "{% url 'delete_policy_api' 0 %}".replace('0', policy_id);
      var request = $.ajax({
        url: delete_policy_url,
        method: "DELETE",
        headers: {"X-CSRFToken": "{{ csrf_token }}"},
        success: function(){
          location.reload();
        }
      });
    }); // End - Delete engine policy modal

    // Duplicate engine policy
    $("button.btn-duplicate-policy").on('click', function (e) {
      policy_id = e.currentTarget.getAttribute('policy-id');
      duplicate_policy_url = "{% url 'duplicate_policy_api' 0 %}".replace('0', policy_id);
      var request = $.ajax({
        url: duplicate_policy_url,
        method: "PUT",
        headers: {"X-CSRFToken": "{{ csrf_token }}"},
        success: function(){
          location.reload();
        }
      });
    }); // End - Duplicate engine policy

  });
</script>
{% endblock %}
